<template>
  <el-card class="box-card"  shadow="never" style="border:0px; margin-buttom:15px;">
    <el-row :gutter="20">
      <el-col :span="6">【题型】:
          <span v-if="fromList.questionType==='1'">单选</span>
          <span v-if="fromList.questionType==='2'">多选</span>
          <span v-if="fromList.questionType==='3'">简答</span>
      </el-col>
      <el-col :span="6">【编号】:{{fromList.id}}</el-col>
      <el-col :span="6">【难度】:
        <span v-if="fromList.difficulty==1">简单</span>e
        <span v-if="fromList.difficulty==3">困难</span>
      </el-col>
      <el-col :span="6">【标签】:{{fromList.tags}}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">【学科】:{{fromList.subjectName}}</el-col>
      <el-col :span="6">【目录】:{{fromList.directoryName}}</el-col>
      <el-col :span="6">【方向】:{{fromList.direction}}</el-col>
    </el-row>
    <hr>
    <el-row :gutter="20">
      <!-- 题干 -->
     【题干】：
      <div v-html="fromList.question" style="color:skyblue"></div>
    </el-row>
    <!-- 内容 -->
    <el-row :gutter="20">
    <div v-if="fromList.questionType==1">
        <!-- 单选 -->
        <div>单选题 选项：(以下选中的为正确答案)</div>
        <el-radio-group :value='1'>
          <el-radio fill="#409EFF" v-for="item in fromList.options" :label="item.isRight" :key="item.id" disabled>{{item.title}}</el-radio>
        </el-radio-group>
    </div>

      <div v-if="fromList.questionType==2">
        <!-- 多选 -->
        <div>多选题 选项：(以下选中的为正确答案)</div>
        <el-checkbox-group v-model="optionsList">
          <el-checkbox fill="#409EFF" v-for="item in fromList.options" :label="item.code" :key="item.id" disabled>{{item.title}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </el-row>
    <hr>
    <!-- 参考答案 -->
    <el-row :gutter="20">
    【参考答案】：
    <div>
      <el-button type="danger" @click="openV">视频答案预览</el-button>
      <div class="video" v-show="play" >
        <video  src="fromList.videoURL" controls ref="video"></video>
      </div>
    </div>
    </el-row>
    <hr>
    <!-- 答案解析 -->
    <el-row :gutter="20">
    【答案解析】：
    <div v-html="fromList.answer"></div>
    </el-row>
    <hr>
    <!-- 题目备注 -->
    <el-row :gutter="20">
     【题目备注】：
     <div>{{fromList.remarks}}</div>
    </el-row>
  </el-card>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'prev',
  props: {
    datas: {
      type: Number
    }

  },
  data () {
    return {
      fromList: [],
      play: false,
      datass: null,
      optionsList: []
    }
  },
  watch: {
    datas: function (newvalue, oldvalue) {
      console.log(newvalue, oldvalue)
      this.datas = newvalue
      this.list()
    }
  },
  mounted () {
    this.list()
  },
  methods: {
    openV () {
      this.play = !this.play
      //  this.$refs.video.play()
    },
    // 获取数据
    async list () {
      const res = await detail({ id: this.datas })
      console.log(res)
      this.fromList = res.data
      console.log(this.fromList.questionType)
      // 对预览的答案进行选中禁止，回显
      const opt = this.fromList.options
      var arr = []
      opt.forEach(item => {
        if (item.isRight === 1) {
          arr.push(item.code)
        }
      })
      this.optionsList = arr
    }
  }
}
</script>

<style scoped lang='scss'>
video{
  margin-top: 10px;
}
</style>
